<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>球型全景图转换为立方体全景图</title>
    <script src="../build/three.js"></script>
    <script src="./js/renderers/CanvasRenderer.js"></script>
    <script src="./js/renderers/Projector.js"></script>
    <script src="../build/mxreality.js"></script>
    <script type="text/javascript" src="./js/sim-tools.js"></script>
</head>
<body onload="main()">

<img id="test"></img>
<button type="button" onclick="draw()">合并图片</button>

<script>
    var fases = { 'x': 'x','nx': 'nx', 'ny': 'ny','y': 'y', 'z': 'z', 'nz': 'nz'};
    var canvasArr=[],finishNum=0,w=h=960;
    function main(){

        var i=0;
        var image = new Image();
        image.src = './textures/puydesancy.jpg';
        image.onload = function() {
            for (var id in fases) {
                var canvas = document.createElement('canvas');
                canvas.width = w;
                canvas.height = h;
                canvas.id = "face_" + id;
                canvasArr[i] = canvas;
                var gl = canvas.getContext('webgl', {preserveDrawingBuffer: true});//获取canvas上下文
                var shaderPorgram = initShaders(gl, id);//初始化着色器程序

                var num = initVertexBuffers(gl, shaderPorgram);
                var PI = gl.getUniformLocation(shaderPorgram, 'PI');
                gl.uniform1f(PI, Math.PI);

                gl.clearColor(0.0, 0.0, 0.0, 1.0);

                // Set texture
                if (!initTextures(gl, shaderPorgram, num,image)) {
                    console.log('Failed to intialize the texture.');
                    //return;
                }
                i++;
            }
        }

    }

    //初始化纹理
    function initTextures(gl,shaderPorgram,n,image){
        var texture = gl.createTexture();//创建纹理对象

        if(!texture){
            console.log('Failed to create the texture object!');
            return false;
        }

        var u_Sampler = gl.getUniformLocation(shaderPorgram,'u_Sampler');

        loadTextures(gl,n,texture,u_Sampler,image);
        return true;
    }

    //加载纹理图片
    function loadTextures(gl,n,texture,u_Sampler,image){
        //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);//对纹理图像进行y轴反转
        gl.activeTexture(gl.TEXTURE0);//激活纹理单元
        gl.bindTexture(gl.TEXTURE_2D, texture);//绑定纹理对象

        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);//配置纹理对象的参数

        /**
         * RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.
         * 大致意思是纹理没有渲染成功，因为所使用的图片的分辨率不是2的幂数，2的幂数是指2*2、4*4、8*8、16*16...256*256...；
         * 需要设置图形纹理参数时设置水平垂直拉伸。
         */
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);//将纹理图像分配给纹理对象

        gl.uniform1i(u_Sampler, 0);//将0号纹理传给着色器中的取样器变量

        //gl.clear(gl.COLOR_BUFFER_BIT);   // Clear <canvas>
        gl.drawArrays(gl.TRIANGLE_STRIP, 0, n); // Draw the rectangle
        //gl.drawArrays(gl.TRIANGLE_STRIP, 1, n); // Draw the rectangle
    }

    //初始化顶点位置
    function initVertexBuffers(gl,shaderPorgram){
        //顶点坐标和纹理坐标映射关系
        var datas = new Float32Array([
            //顶点坐标、纹理坐标
            -1.0,1.0,0.0,1.0,
            -1.0,-1.0,0.0,0.0,
            1.0,1.0,1.0,1.0,
            1.0,-1.0,1.0,0.0
        ]);

        var num = 4;//顶点数目
        var vertexBuffer = gl.createBuffer();//创建缓冲区对象

        if(!vertexBuffer){
            console.log('Failed to create the buffer object!');
            return -1;
        }

        //将缓冲区对象绑定到目标并写入数据
        gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);
        gl.bufferData(gl.ARRAY_BUFFER,datas,gl.STATIC_DRAW);

        var size = datas.BYTES_PER_ELEMENT;//数组中的每个元素的大小（以字节为单位）

        //顶点着色器接受顶点坐标和纹理坐标映射关系
        var a_Position = gl.getAttribLocation(shaderPorgram,'a_Position');
        gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,size*4,0);
        gl.enableVertexAttribArray(a_Position);

        var a_TexCoord = gl.getAttribLocation(shaderPorgram,'a_TexCoord');
        gl.vertexAttribPointer(a_TexCoord,2,gl.FLOAT,false,size*4,size*2);
        gl.enableVertexAttribArray(a_TexCoord);

        return num;
    }
</script>
</body>
</html>